<html>
  <head>
    <title>container + WASI on browser</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.17.0/css/xterm.css">
  </head>
  <body>
    <div id="terminal"></div>
    <script src="https://cdn.jsdelivr.net/npm/xterm@4.17.0/lib/xterm.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/xterm-pty@0.9.4/index.js"></script>
    <script src="./dist/runcontainer.js"></script>
    <script>
      const xterm = new Terminal();
      xterm.open(document.getElementById("terminal"));
      const { master, slave } = openpty();
      termios = slave.ioctl("TCGETS");
      termios.iflag &= ~(/*IGNBRK | BRKINT | PARMRK |*/ ISTRIP | INLCR | IGNCR | ICRNL | IXON);
      termios.oflag &= ~(OPOST);
      termios.lflag &= ~(ECHO | ECHONL | ICANON | ISIG | IEXTEN);
      //termios.cflag &= ~(CSIZE | PARENB);
      //termios.cflag |= CS8;
      slave.ioctl("TCSETS", new Termios(termios.iflag, termios.oflag, termios.cflag, termios.lflag, termios.cc));
      xterm.loadAddon(master);

      const worker = new Worker("./worker.js");
      const vmImage = location.origin + "/out.wasm.gzip";
      const mounterImage = location.origin + "/imagemounter.wasm.gzip";
      const stackWorkerFile = location.origin + "/dist/stack-worker.js";
      const containerImageAddress = getImageParam();
      const infoP = RunContainer.createContainerWASI(vmImage, containerImageAddress, stackWorkerFile, mounterImage);
      infoP.then((info) => {
          worker.postMessage({type: "init", info: info, args: ['/bin/bash']});
          new TtyServer(slave).start(worker);
      })
      function getImageParam() {
          var vars = location.search.substring(1).split('&');
          for (var i = 0; i < vars.length; i++) {
              var kv = vars[i].split('=');
              if (decodeURIComponent(kv[0]) == 'image') {
                  return kv[1];
              }
          }
          return null;
      }
    </script>
  </body>
</html>
